{% extends 'article/base.html' %}
{% load static %}
{% block title %} article detail{% endblock %}
{% block link %}
    <link rel="stylesheet" href="{% static 'editor/css/editormd.preview.css' %}">
{% endblock %}
{% block content %}
    <div>
        <header>
            <h1>{{ article.title }}</h1>
            <p>{{ user.username }}</p>
        </header>

        <div id="editormd-view">
            <textarea id="append-test" style="display:none;">
                {{ article.body }}
            </textarea>
        </div>
    </div>
{% endblock %}

{% block javascript %}
    <script src="{% static 'editor/lib/marked.min.js' %}"></script>
    <script src="{% static 'editor/lib/prettify.min.js' %}"></script>
    <script src="{% static 'editor/lib/raphael.min.js' %}"></script>
    <script src="{% static 'editor/lib/underscore.min.js' %}"></script>
    <script src="{% static 'editor/lib/sequence-diagram.min.js' %}"></script>
    <script src="{% static 'editor/lib/flowchart.min.js' %}"></script>
    <script src="{% static 'editor/lib/jquery.flowchart.min.js' %}"></script>
    <script src="{% static 'editor/editormd.min.js' %}"></script>
    <script type="text/javascript">
        $(function () {
            editormd.markdownToHTML("editormd-view", {
                htmlDecode: "style,script,iframe",
                emoji: true,
                taskList: true,
                tex: true,
                flowChart: true,
                sequenceDiagram: true,
            })
        })
    </script>
{% endblock %}